<template>
  <div class="pk-keysword" :class="{'pk-keysword-isReadonly': isReadonly}">
    <div class="pk-keysword-loading" v-if="loading" v-loading="loading"></div>
    <div class="pk-keysword-body">
      <div class="flexRow pk-keysword-keysbox mb-8 mt-2" v-if="allkeyslist.length > 0">
        <div v-for="(item,index) in allkeyslist" :key="index" class="pk-keysword-keysitem" :class="{'pk-keysword-keysitema': keylist.includes(item)}" @click="selectKey(item)">
          {{item}}
        </div>
      </div>
    </div>
    <div class="flexRow align-items-center h-32" v-if="!isReadonly">
      <div class="flex-1">
        <div v-if="isAdd" class="flexRow">
          <div class="mr-8">
            <pk-input v-model="addvalue" size="sm" placeholder="请输入关键字"></pk-input>
          </div>
          <div class="flexRow">
            <div class="mr-8"><pk-button @click="setCloseAdd" type="default">取消</pk-button></div>
            <div><pk-button @click="setIsAdd">确定</pk-button></div>
          </div>
        </div>
        <div v-if="!isAdd" @click="isAdd=true">
          <div class="basegColor pointer f-12 pk-keysword-addicon">添加自定义关键字</div>
        </div>
      </div>
      <div class="f-12 gray-color" v-if="keylist.length > 0 && !isReadonly">
        已选 {{ keylist.length }} 个
      </div> 
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted, defineProps, defineEmits, watch } from 'vue'
  import { generateKeywords }  from '@/api/busapi'
  import pkButton from '@/components/pkui/pkbutton/pkbutton.vue'
  import pkInput from '@/components/pkui/pkinput/pkinput.vue'
  import { Toast } from '@/utils/vant'
  const emits = defineEmits(["update:modelValue"]);
  const loading = ref(false)
  const props = defineProps({
    isReadonly:{
      type: Boolean,
      default: false
    },
    modelValue: {
      type: Array,
      default: () => [],
    },
    job_name: {
      type: String,
      default: ''
    }
  })
  const keylist = ref(props.modelValue || []) // 已选中
  const allkeyslist = ref(props.modelValue || []) // 全部过滤重复的
  const joblen = ref(10)
  const isAdd = ref(false)
  const job_name = ref(props.job_name || '')
  const addvalue = ref('')

  let timer = null;
  watch(() => props.job_name, (val) => { 
    if (props.isReadonly) {
      return
    }
    job_name.value = val 
     // 如果定时器存在 清除 重新定时
    timer && clearTimeout(timer);
    // 设置定时器 隔0.5s打印输入框的值
    timer = setTimeout(() => {
      getInit()
    }, 2000); 
  })

  const selectKey = (item) => {
    if (keylist.value.includes(item)) {
      keylist.value = keylist.value.filter(i => i !== item)
    } else {
      if (keylist.value.length >= joblen.value) {
        Toast("已选中的关键字不能超过10个", 'error')
        return
      }
      keylist.value.push(item)
    }
    emits('update:modelValue', keylist.value)
  }
  const setCloseAdd = () => {
    addvalue.value = ""
    isAdd.value = false
  }
  const setIsAdd = () => {
    if (!addvalue.value) {
      return
    }
    if (keylist.value.length >= joblen.value) {
      Toast("已选中的关键字不能超过10个", 'error')
      return
    }

    if(allkeyslist.value.includes(addvalue.value)){
      Toast("该关键词已存在", 'error')
      return
    } 
   
    if(!keylist.value.includes(keylist.value)){
      console.log('111111')
      keylist.value.push(addvalue.value)
      console.log(keylist.value)
    }

    if(!allkeyslist.value.includes(addvalue.value)){
      console.log('22222')
      allkeyslist.value.unshift(addvalue.value)
      console.log(allkeyslist.value)
    } 
    addvalue.value = ""
    isAdd.value = false
  }
  const getInit = () => {
    if (!job_name.value) {
      return
    }
    if (keylist.value.length >= joblen.value) {
      return
    }
    loading.value = true
    generateKeywords({
      job_name:job_name.value
    }).then(res => {
      loading.value = false
      if (allkeyslist.value.length > 0) {
        allkeyslist.value = Array.from(new Set(allkeyslist.value.concat(res.data.keywords)))
      } else {
        allkeyslist.value = res.data.keywords
      }
    }).catch(() => {
      loading.value = false
    })
  }
  
  onMounted(() => {
   
  })
</script>

<style lang="scss" scoped>
.pk-keysword{
  // border: #d9d9d9 1px solid;
  border-radius: 4px;
  width: 600px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  &-isReadonly{
    width: auto!important;
    .pk-keysword-body{
      padding: 0px!important;
    }

  }
  &-loading{
    position: absolute;
    top:0;
    bottom: 0;
    left:0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(2px);
  }
  &-tipbox{
    min-height: 32px;
    max-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  &-keysitem{
    height: 28px;
    border-radius: 28px;
    border:#d9d9d9 1px solid;
    min-width: 60px;
    line-height: 28px;
    text-align: center;
    margin-right: 12px;
    cursor: pointer;
    margin-bottom: 8px;
    padding: 0 12px;
    color: #999;
    font-size: 12px;
  }
  &-addicon{
    background: url('@/assets/image/plusicon.png') center left no-repeat;
    background-size: 12px auto;
    padding-left: 16px;
  }
  &-keysitema{
    border: #186e30 1px solid;
    color: #186e30;
  }
  &-keysbox{
    display: flex;
    flex-wrap: wrap;
    min-height: 32px;
    max-height: 100px;
    overflow: auto;
    align-content:baseline
  }
  &-body{
    padding: 0 12px 0 12px;
  }
}
</style>